<template>
    <div class="details container" ref="details">
        <div class="nav-box">
            <van-icon name="arrow-left" @click="goBack" />
            <span class="title">{{title}}</span>
            <span>更多</span>
        </div>
        <div class="header-box">
            <div class="ower">
                <img class="fullimg" src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4052667666,3811234810&fm=26&gp=0.jpg">
            </div>
            <div class="desc">
                <div class="status">
                    <span>审批中</span>
                </div>
                <div>蔡文姬</div>
                <div class="timecode">
                    <span>创建时间：2019-02-19 15:48:02</span>
                    <span class="code">编码：189</span>
                </div>
            </div>
        </div>
        <div>
            <van-cell-group>
                <van-cell title="需求人*" value="蔡文姬" />
                <van-cell title="项目编码*" value="18-JDS" />
                                <van-cell title="需求人*" value="蔡文姬" />
                <van-cell title="项目编码*" value="18-JDS" />
                                <van-cell title="需求人*" value="蔡文姬" />
                <van-cell title="项目编码*" value="18-JDS" />
                                <van-cell title="需求人*" value="蔡文姬" />
                <van-cell title="项目编码*" value="18-JDS" />
            </van-cell-group>
        </div>
        <div class="examine-list">
            <div class="examine-item">
                <span class="iconfont icontongguo"></span>
                <div class="result-box-wrapper">
                    <div class="result-box">
                        <div class="head-img">
                            <img class="fullimg" src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4052667666,3811234810&fm=26&gp=0.jpg" />
                        </div>
                        <div class="message-box">
                            <div class="message-item">
                                <span>蔡文姬</span>
                                <span>耗时2分12秒</span>
                            </div>
                            <div class="message-item">
                                <span style="color:#07c160">通过审批</span>
                                <span>2019-02-19 15:51:42</span>
                            </div>
                        </div>
                    </div>
                    <div class="result-box-sallow"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Details',
    data() {
        return { 
            id:'',
            title:'渊的任务指派单'
        }
    },

    mounted() {
        this.id = this.$route.params.id;
    },
    methods:{
        goBack() {
            this.$animateBack();
        }
    }
}
</script>
<style lang="less">
@import '../../css/var.less';
.details {
    background:#eee;
    .nav-box {
        height:40px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:0 @space;
        box-sizing:border-box;
        background:#fff;
        .title {
            font-size:18px;
        }
        .iconfont {
            font-size: 20px;
        }
    }
    .header-box {
        display:flex;
        flex-direction:row;
        justify-content:flex-start;
        align-items:center;
        background:#fff;
        padding:0 @space;
        .ower {
            width: 60px;
            height: 60px;
            border-radius: 5px;
            overflow: hidden;
        }
        .desc {
            flex:1;
            margin-left: 5px;
            font-size:14px;
            line-height: 1;
            line-height: 1.5;
            .status {
                color:#f00;
                text-align: right;
            }
            .timecode {
                display:flex;
                flex-direction:row;
                justify-content:space-between;
            }
        }
    }
    .examine-list {
        margin-top:15px;
        .examine-item {
            padding:15px 25px;
            display:flex;
            flex-direction:row;
            justify-content:flex-start;
            .iconfont {
                color:#07c160;
                font-size: 28px;
            }
            .result-box-wrapper {
                position:relative;
                flex:1;
                margin-left: 15px;
                .result-box {
                    display:flex;
                    flex-direction:row;
                    justify-content:flex-start;
                    align-items:center;
                    font-size:14px;
                    background:#fff;
                    padding:15px;
                    line-height:1.5;
                    position: relative;
                    z-index:2;
                    .head-img {
                        width:40px;
                        height: 40px;
                    }
                    .message-box {
                        flex:1;
                        .message-item {
                            display:flex;
                            flex-direction:row;
                            justify-content:space-between;
                        }
                    }
                }
                .result-box-sallow {
                    z-index:1;
                    content: '';
                    position:absolute;
                    top:20px;
                    left:-8px;
                    width:0;
                    height:0;
                    border-top:8px solid transparent;
                    border-right:8px solid #fff;
                    border-bottom:8px solid transparent;
                }
            }
        }
    }
}
</style>